<template>
  <div>
    <el-table :data="userlist" :row-style="{ color: '#99ccff' }" :fit="true">
      <el-table-column
        align="center"
        prop="user"
        label="账号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="用户名"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="tel"
        label="联系方式"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="email"
        label="电子邮件"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="limit"
        label="权限"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="lastTime"
        label="最近登录"
      ></el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            plain
            :type="scope.row.disable ? 'warning' : 'success'"
            @click="disableFun(scope.$index, scope.row)"
            >{{ scope.row.disable ? "禁用" : "激活" }}</el-button
          >
          <el-button
            size="mini"
            plain
            type="danger"
            @click="removeFun(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align:center;margin-top:30px;" background layout="prev, pager, next" :page-size="findData.size" :page-count="findData.pages" :current-page="findData.skip" :total="findData.total">
    </el-pagination>
  </div>
</template>

<script>
import { onMounted, toRefs } from "vue";
import userListJS from "./userList.js";
export default {
  name: "userlist",
  setup() {
    let {
      status,
      methodFun: { getUser, disableFun, removeFun },
    } = userListJS();
    let { userinfo, myselfLimit, userlist,findData } = toRefs(status)
    onMounted(() => {
      getUser();
    });
    return {
      getUser,
      disableFun,
      removeFun,
      userinfo,
      myselfLimit,
      userlist,
      findData
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent;
}

/deep/.el-table th,
.el-table tr {
  background-color: transparent !important;
}
</style>
